<template>
  <div class="list flex justify-between align-center gc-6">
    <div v-if="showAvatar" class="flex align-center list_image_icon">
      <img v-if="icon" :src="icon" :width="imageSize" :height="imageSize" />
    </div>
    <div
      class="flex flex-1 list-item pr-16"
      :style="{ 'border-bottom': border ? '' : '1px solid #f1f1f1' }"
    >
      <div class="flex-1 flex gc-2 align-center">
        <span
          :style="{ fontSize: `${fontSize}px`, color: `${color}` }"
          :class="[shadow ? 'text-shadow' : '']"
        >
          {{ title }}
        </span>
        <slot name="tag">
          <div v-if="tag" class="list_tag text-10">{{ tag }}</div>
        </slot>
      </div>
      <div class="flex gc-2 align-center">
        <slot></slot>
        <div> {{ subtitle }} </div>
        <img v-if="showArrow" width="14" height="14" :src="arrowRight"  />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import arrowRight from '@/assets/images/arrow-right.png';

  withDefaults(
    defineProps<{
      title: string;
      subtitle?: string;
      icon?: string;
      tag?: string;
      border?: boolean;
      imageSize?: number;
      fontSize?: number;
      showArrow?: boolean;
      showAvatar?: boolean;
      color?: string;
      shadow?: boolean;
    }>(),
    {
      imageSize: 24,
      fontSize: 12,
      showArrow: true,
      showAvatar: true,
      color: '#432343',
      shadow: false,
    }
  );
</script>

<style lang="scss" scoped>
  .list {
    background-color: white;
    line-height: 48px;
    color: v-bind(color);
    .list_image_icon {
      width: v-bind(imageSize);
      height: v-bind(imageSize);
      border-radius: 2px;
      overflow: hidden;
    }
    .list_tag {
      background-color: #feedd9;
      color: #f8ab59;
      height: 24px;
      line-height: 24px;
      border-radius: 4px;
      padding: 0 4px;
    }
  }
</style>
